{% load static %}
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>投票系统</title>
    <link rel="stylesheet" href="{% static 'polls/style.css' %}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</head>
<body>
    <header class="main-header">
        <div class="header-content">
            <div class="logo">
                <i class="fas fa-poll"></i>
                <h1>投票系统</h1>
            </div>
            <nav class="main-nav">
                <a href="{% url 'polls:index' %}" class="nav-link active">
                    <i class="fas fa-home"></i> 首页
                </a>
            </nav>
            <div class="admin-actions">
                {% if user.is_staff %}
                    <a href="{% url 'admin:index' %}" class="admin-link">
                        <i class="fas fa-cog"></i>
                        <span>管理后台</span>
                    </a>
                {% else %}
                    <a href="{% url 'admin:login' %}" class="admin-link">
                        <i class="fas fa-user-shield"></i>
                        <span>管理员登录</span>
                    </a>
                {% endif %}
            </div>
        </div>
    </header>

    <div class="container">
        <div class="stats-container">
            <div class="stat-card">
                <i class="fas fa-list"></i>
                <div class="stat-info">
                    <span class="stat-value">{{ latest_question_list|length }}</span>
                    <span class="stat-label">进行中的投票</span>
                </div>
            </div>
            <div class="stat-card">
                <i class="fas fa-users"></i>
                <div class="stat-info">
                    <span class="stat-value">{{ total_votes }}</span>
                    <span class="stat-label">总参与人数</span>
                </div>
            </div>
            <div class="stat-card">
                <i class="fas fa-clock"></i>
                <div class="stat-info">
                    <span class="stat-value">{{ latest_question_list.0.pub_date|date:"Y-m-d" }}</span>
                    <span class="stat-label">最新投票日期</span>
                </div>
            </div>
        </div>

        <div class="search-filter-container">
            <div class="search-box">
                <i class="fas fa-search"></i>
                <input type="text" placeholder="搜索投票..." id="searchInput">
            </div>
        </div>

        {% if latest_question_list %}
            <div class="question-filters">
                <button class="filter-btn active" data-filter="all">全部</button>
                <button class="filter-btn" data-filter="hot">热门</button>
                <button class="filter-btn" data-filter="recent">最新</button>
            </div>

            <ul class="question-list">
            {% for question in latest_question_list %}
                <li class="question-card" data-votes="{{ question.total_votes }}">
                    <div class="question-header">
                        <a href="{% url 'polls:detail' question.id %}" class="question-title">
                            {{ question.question_text }}
                        </a>
                        <span class="question-status {% if question.was_published_recently %}status-new{% endif %}">
                            {% if question.was_published_recently %}
                                <i class="fas fa-star"></i> 新
                            {% endif %}
                        </span>
                    </div>
                    <div class="question-meta">
                        <div class="meta-left">
                            <small class="publish-date">
                                <i class="fas fa-clock"></i> {{ question.pub_date|date:"Y-m-d H:i" }}
                            </small>
                            {% if question.end_date %}
                            <small class="end-date">
                                <i class="fas fa-hourglass-end"></i> {{ question.end_date|date:"Y-m-d H:i" }}
                            </small>
                            {% endif %}
                            <small class="total-votes">
                                <i class="fas fa-chart-bar"></i> {{ question.total_votes }} 票
                            </small>
                        </div>
                        <div class="meta-right">
                            <a href="{% url 'polls:detail' question.id %}" class="btn-vote">
                                <i class="fas fa-vote-yea"></i> 去投票
                            </a>
                            {% if user.is_staff %}
                            <a href="{% url 'admin:polls_question_change' question.id %}" class="btn-manage">
                                <i class="fas fa-cog"></i> 管理
                            </a>
                            {% endif %}
                        </div>
                    </div>
                </li>
            {% endfor %}
            </ul>
        {% else %}
            <div class="empty-state">
                <i class="fas fa-inbox fa-3x"></i>
                <p>暂无可用的投票</p>
            </div>
        {% endif %}
    </div>

    <footer class="main-footer">
        <div class="footer-content">
            <div class="footer-section">
                <h3>关于我们</h3>
                <p>投票系统是一个简单、高效的在线投票平台，让您轻松创建和管理投票活动。</p>
            </div>
            <div class="footer-section">
                <h3>联系我们</h3>
                <ul>
                    <li><i class="fas fa-envelope"></i> 3106780282@qq.com</li>
                    <li><i class="fas fa-phone"></i> 182-8995-9668</li>
                </ul>
            </div>
        </div>
        <div class="footer-bottom">
            <p>&copy; 2024 投票系统. 保留所有权利.</p>
        </div>
    </footer>

    <script>
        // 搜索功能
        document.getElementById('searchInput').addEventListener('input', function(e) {
            const searchText = e.target.value.toLowerCase();
            const questions = document.querySelectorAll('.question-card');
            
            questions.forEach(question => {
                const title = question.querySelector('.question-title').textContent.toLowerCase();
                if (title.includes(searchText)) {
                    question.style.display = '';
                } else {
                    question.style.display = 'none';
                }
            });
        });

        // 筛选功能
        document.querySelectorAll('.filter-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                // 更新按钮状态
                document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
                this.classList.add('active');

                const filter = this.dataset.filter;
                const questions = Array.from(document.querySelectorAll('.question-card'));

                if (filter === 'hot') {
                    questions.sort((a, b) => {
                        return parseInt(b.dataset.votes) - parseInt(a.dataset.votes);
                    });
                } else if (filter === 'recent') {
                    questions.sort((a, b) => {
                        const dateA = new Date(a.querySelector('.publish-date').textContent);
                        const dateB = new Date(b.querySelector('.publish-date').textContent);
                        return dateB - dateA;
                    });
                }

                const container = document.querySelector('.question-list');
                questions.forEach(q => container.appendChild(q));
            });
        });
    </script>
</body>
</html>
